<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/common.css">
    <style>
        .container {
            width: 980px;
        }

        .main {
            height: 500px;
            width: 980px;
            background: url(images/reg_bg.gif) no-repeat;
        }

        .sex-man {
            width: 22px;
            height: 21px;
            background: url(images/Male.gif);
            display: inline-block;
        }

        .sex-woman {
            width: 22px;
            height: 21px;
            background: url(images/Female.gif);
            display: inline-block;
        }

        .van {
            width: 50%;
            float: left;
        }

        .van-box {
            width: 50px;
            height: 20px;
        }

        .main-header {
            height: 70px;
        }

        .van-text {
            float: right;
        }

        /* 性别样式 */
        .van-sex {
            margin: 20px 0;
            width: 200px;
            height: 24px;
        }

        .sex-right {
            position: relative;
            left: 111px;
        }

        .sex-left {
            position: relative;
            left: 111px;
            font-weight: bold;
            float: left;
        }

        /* 头像样式 */
        .file-left {
            position: relative;
            left: 111px;
            font-weight: bold;
            float: left;
        }

        .file-right {
            position: relative;
            left: 111px;
            margin-bottom: 10px;
        }

        /* 爱好样式 */
        .hobby-left {
            position: relative;
            left: 111px;
            font-weight: bold;
            float: left;
        }

        .hobby-right {
            position: relative;
            left: 111px;
            margin-bottom: 10px;
        }

        /* 日期样式 */
        .van-day {
            width: 100%;
            height: 25px;
        }

        .day-left {
            position: relative;
            left: 85px;
            font-weight: bold;
            float: left;
        }

        .day-right {
            position: relative;
            left: 89px;
            margin-bottom: 10px;
            margin: 20px;
        }

        /* 按钮样式 */
        .van-button {
            width: 100%;
            height: 30px;
            position: relative;
        }

        .button-left {
            margin: 10px 30px 0 150px;
            float: left;
        }

        .button-right {
            margin-top: 10px;
            float: left;
        }

        /* 文本框样式 */
        .main-text {
            width: 50%;
            height: 100%;
            float: right;
        }

        .text-header {
            width: 100%;
            height: 30px;
            margin-left: 100px;
        }

        .text-header-img {
            width: 35px;
            height: 26px;
            background: url(images/read.gif);
            display: inline-block;
        }

        .text-body {
            margin: 30px 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <iframe src="header.html" frameborder="0" style="width: 980px;"></iframe>
        </div>
        <div class="main">
            <div class="main-header"></div>
            <div class="van">

                <form action="" method="post">
                    <table>
                        <tr>
                            <th>
                                <div class="van-box"></div>
                            </th>
                            <th class="van-text">名字:</th>
                            <th><input type="text" name="" id="" style="width: 140px;"></th>
                        </tr>
                        <tr>
                            <th>
                                <div class="van-box"></div>
                            </th>
                            <th class="van-text">姓氏:</th>
                            <th><input type="text" name="" id="" style="width: 140px;"></th>
                        </tr>
                        <tr>
                            <th>
                                <div class="van-box"></div>
                            </th>
                            <th class="van-text">登录名:</th>
                            <th><input type="text" style="width: 140px;"></th>
                            <th>（可包含a-z、0-9和下划线）</th>
                        </tr>
                        <tr>
                            <th>
                                <div class="van-box"></div>
                            </th>
                            <th class="van-text">密码:</th>
                            <th><input type="password" name="" id="" style="width: 140px;"></th>
                            <th>（至少包含6个字符）</th>
                        </tr>
                        <tr>
                            <th>
                                <div class="van-box"></div>
                            </th>
                            <th class="van-text">再次输入密码:</th>
                            <th><input type="password" name="" id="" style="width: 140px;"></th>
                        </tr>
                        <tr>
                            <th>
                                <div class="van-box"></div>
                            </th>
                            <th class="van-text">电子邮箱:</th>
                            <th><input type="text" name="" id="" style="width: 140px;"></th>
                            <th>（必须包含@字符）</th>
                        </tr>
                    </table>
                    <div class="van-sex">
                        <span class="sex-left">性别:</span>
                        <div class="sex-right">
                            <input type="radio" name="sex" id="" checked="checked">
                            <span class="sex-man"></span>男
                            <input type="radio" name="sex" id="">
                            <span class="sex-woman"></span>女
                        </div>
                    </div>

                    <div class="van-file">
                        <span class="file-left">头像:</span>
                        <input type="file" name="" id="" class="file-right">
                    </div>

                    <div class="van-hobby">
                        <span class="hobby-left">爱好:</span>
                        <div class="hobby-right">
                            <input type="checkbox" name="" id="">运动
                            <input type="checkbox" name="" id="">聊天
                            <input type="checkbox" name="" id="">玩游戏
                        </div>

                    </div>
                    <div class="van-day">
                        <span class="day-left">出生日期:</span>
                        <div class="day-right">
                            <input type="text" name="" id="" style="width: 30px;">年
                            <select name="month" id="">
                                <option value="0" selected="selected">[选择月份]</option>
                                <option value="1">1月</option>
                                <option value="2">2月</option>
                                <option value="3">3月</option>
                                <option value="4">4月</option>
                                <option value="5">5月</option>
                                <option value="6">6月</option>
                                <option value="7">7月</option>
                                <option value="8">8月</option>
                                <option value="9">9月</option>
                                <option value="10">10月</option>
                                <option value="11">11月</option>
                                <option value="12">12月</option>
                            </select>
                            <input type="text" name="" id="" style="width: 20px;">日
                        </div>
                    </div>
                    <div class="van-button">
                        <div class="button-left">
                            <input type="image" src="images/submit.gif" alt="">
                        </div>
                        <div class="button-right">
                            <input type="image" src="images/reset.gif" alt="">
                        </div>
                    </div>
                </form>
            </div>
            <div class="main-text">
                <div class="text-header">
                    <span class="text-header-img"></span>
                    <span style="font-weight: bold;">阅读贵美网服务协议</span>
                </div>
                <div class="text-body">
                    <textarea name="" cols="40px" rows="20px" readonly="readonly">
    欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Gmgw. com网站的各种工具和服务。
    本服务协议双方为贵美与贵美网用户，本服务协议具有合同效力。
    贵美的权利和义务
    1.贵美有义务在现有技术上维护整个网上交易平台的正常运行，并努力提升和改进技术，使用户网上交易活动的顺利。
    2.对用户在注册使用贵美网。上交易平台中所遇到的与交易或注册有关的问题及反映的情况，贵美应及时作出回复。
    3.对于在贵美网网上交易平台上的不当行为或其它任何贵美认为应当终止服务的情况，贵美有权随时作出删除相关信息、终止服务担供等处理，而无须征得用
    3.对于在贵美网网上交易平台上的不当行为或其它任何贵美认为应当终止服务的情况，贵美有权随时作出删除相关信息、终止服务担供等处理，而无须征得用
    3.对于在贵美网网上交易平台上的不当行为或其它任何贵美认为应当终止服务的情况，贵美有权随时作出删除相关信息、终止服务担供等处理，而无须征得用
                    </textarea>
                </div>
            </div>
        </div>

        <div class="footer">
            <iframe src="footer.html" frameborder="0" style="width: 980px;height: 163px;"></iframe>
        </div>
    </div>
</body>

</html>